Ext.onReady(function(){

    Ext.QuickTips.init();
	
	/*****************************************************************************************************/
    /*************************************** LOGIN WINDOW ************************************************/
    /*****************************************************************************************************/
	
	/* Actions */

    var action_ingresar = new Ext.Action({ 
		text	: 'Ingresar',
		cls		: 'x-btn-text-icon user_go',
		formBind: true,	 
		handler	: function(){ 

			var challange_response = [
				challenge,
				Ext.util.MD5(login.getForm().findField('password').getValue())
			].join('');
			
			challange_response = Ext.util.MD5(challange_response);
			login.getForm().findField('loginPassword').setValue(challange_response);
			login.getForm().findField('password').disable();	
			login.getForm().submit({ 
				waitTitle	: 'Conectado', 
				waitMsg		: 'Enviando informacion...',
				success		: function(form, action){ 
					//login.getForm().findField('password').enable(); 
					//login.getForm().reset();
					//window.location = 'administracion.php';
					store_grid_tags.reload();
					win.close();
				},
				failure		: function(form, action){
					login.getForm().findField('password').enable();
					login.getForm().reset();
					//challenge = action.result.challenge;
					failure_message(action);
				}
			});				
		}
	});
	
	var handle_special_key = function(field, ev){
		if(ev.getKey() == ev.ENTER){
			ev.preventDefault();
			if(login.getForm().isValid())
				action_ingresar.execute();
		}
	};
	
    var login = new Ext.FormPanel({ 
        labelWidth	: 80,
        frame		: true, 
        title		: 'Ingreso al sistema de administración', 
        defaultType	: 'textfield',
		monitorValid: true,
		api			: { 
			submit	: System_Functions.login
		},
        items:[{ 
			fieldLabel	: 'Usuario', 
			name		: 'loginUsername', 
			allowBlank	: false,
			listeners	: {
				specialkey	: {
					fn	: handle_special_key
				}
			}
		},{ 
			fieldLabel	: 'Contrase&ntilde;a', 
			name		: 'password', 
			inputType	: 'password', 
			allowBlank	: false,
			listeners	: {
				specialkey	: {
					fn	: handle_special_key
				}
			}
		},{ 
			xtype	: 'hidden', 
			name	: 'loginPassword'               
		}],			
        buttons:[ action_ingresar ] 
    });
      
    var win = new Ext.Window({
        layout		: 'fit',
        width		: 300,
        height		: 150,
        closable	: false,
        resizable	: false,
		modal		: true,
        plain		: true,
        border		: false,
        items		: [	login ]
	});
	
	win.show();

    /*****************************************************************************************************/
    /******************************************** TAGS ***************************************************/
    /*****************************************************************************************************/
    
    var direct_callback_borrar_producto = function(response, e) {
        var text = '';
        var title = '';
        if(true === e.status) {
            if(response.success == true){
                title = 'Éxito';
                text  = 'El producto se ha eliminado correctamente.';
            }
            else{
                title = 'Error';
                text  = response.msg;
            }
        }
        else{
            title = 'Error';
            text  = e.message;
        }

        Ext.Msg.alert(title, text, function(){ store_grid_tags.reload(); });
    };
	
    /* Actions */

    var action_nuevo_tag = new Ext.Action({
        text    : 'Alta',
        cls     : 'x-btn-text-icon add',
        handler : function(){
            
            //Limpio las selecciones de la grilla de productos
            grid_tags.getSelectionModel().clearSelections();
            
            //Configuro Ventana
            form_tags.getForm().reset();
            form_tags.getForm().setValues({id_tag: undefined, id_prod_tag: undefined, esl_tag_alias: undefined, new_tag: 1});
            form_tags.getForm().clearInvalid();
            window_tags.setTitle('Alta de TAG');

            //Muestro Ventana
            window_tags.show();
        }
    });

    var action_modificar_tag = new Ext.Action({
        text    : 'Modificar',
        disabled: true,
        cls     : 'x-btn-text-icon edit',
        handler : function(){

            var producto = grid_tags.getSelectionModel().getSelected();
        
            if(producto){

                //Configuro Ventana
                form_tags.getForm().setValues(producto.data);
				form_tags.getForm().setValues({new_tag: 0});
                window_tags.setTitle('Modificando el TAG "' + producto.data.id_tag + '"');

                //Muestro Ventana
                window_tags.show();

            }else
                Ext.Msg.alert('Error', 'Seleccione un TAG.');

        }
    });

    var action_eliminar_tag = new Ext.Action({
        text    : 'Eliminar',
        disabled: true,
        cls     : 'x-btn-text-icon bin_closed',
        handler : function(){
            if( grid_tags.getSelectionModel().getSelected() ){
                Ext.MessageBox.show({
                    title   : '¿Eliminar TAG?',
                    msg     : '¿Esta seguro que desea eliminar el TAG <span style="color: #f00;font-weight: bold;">"' + grid_tags.getSelectionModel().getSelected().data.id_tag + '"</span> de la lista?',
                    buttons : Ext.MessageBox.YESNO,
                    icon    : Ext.MessageBox.QUESTION,
                    fn : function(btn){
                        if (btn == 'yes')
                            DirectProduct.deleteProduct(grid_tags.getSelectionModel().getSelected().data, direct_callback_borrar_producto)
                    }
                });
            }else
                Ext.Msg.alert('Error', 'Seleccione un TAG.');
        }
    });

    var asociar_tag_producto = new Ext.Action({
        text     : 'Asociar a un producto',
        cls      : 'x-btn-text-icon reasig',
        disabled : true,
        handler  : function(){
        
        	var producto = grid_tags.getSelectionModel().getSelected();
        
            if(producto){

                //Configuro Ventana
                form_asociar_tag.getForm().setValues(producto.data);
                window_asociar_tag.setTitle('Asociar el TAG "' + producto.data.id_tag + '" a un Producto');

                //Muestro Ventana
                window_asociar_tag.show();

            }else
                Ext.Msg.alert('Error', 'Seleccione un TAG.');
        
        }
    });

    var actualizar_info_de_tags = new Ext.Action({
        text     : 'Actualizar Displays',
        cls      : 'x-btn-text-icon refresh',
        disabled : false,
        handler  : function(){
        	DirectProduct.updateDisplaysInfo();
        }
    });

    /*Forms y ventanas*/

    var form_tags = new Ext.form.FormPanel({
        labelAlign    : 'top',
        loadMask      : true,
        paramsAsHash  : true,
        frame         : true,
        //autoScroll    : true,
        border        : false,
        monitorValid  : true,
        defaults : {
            anchor : '95%'
        },
        api : {
            submit : DirectProduct.updateProduct
        },
        items: [{
            xtype      : 'textfield',
            fieldLabel : 'Alias',
            name       : 'esl_tag_alias',
            maxLength  : 255,
            allowBlank : true
        },{
            xtype      : 'textfield',
            fieldLabel : 'Código de Barra del TAG',
            name       : 'esl_tag_barcode',
            minLength  : 12,
            maxLength  : 12,
            allowBlank : true
        },{
            // Revisar si la asociación se hace por codigo de barra o por id del producto (o si se hace directamente por selección sobre una pantalla con la lista de prodcutos con un buscador)
            // OJO con la validación del código de barra!!
            xtype      : 'numberfield',
            fieldLabel : 'ID del Producto',
            name       : 'esl_tag_id_producto',
            allowBlank : true
        },{
            xtype      : 'numberfield',
            name       : 'new_tag',
			hidden	   : true,
            allowBlank : false
        },{
            xtype        : 'numberfield',
            //fieldLabel   : 'TAG ID',
            name         : 'id_tag',
            allowBlank   : true,
            hidden	     : true,
            readOnly     : true
        }],
        buttons: [{
            text     : 'Guardar',
            cls      : 'x-btn-text-icon accept',
            formBind : true,
            handler  : function(){

                form_tags.getForm().submit({
                    waitTitle : 'Conectado',
                    waitMsg   : 'Enviando informacion...',
                    success   : function(form, action){
                        Ext.Msg.alert('Exito', 'Se ha grabado el TAG');
                    },
                    failure   : function(form, action){
                        failure_message(action);
                    }
                });

            }
        },{
            text    : 'Salir',
            cls     : 'x-btn-text-icon cross',
            handler : function(){ 
				window_tags.hide();
				store_grid_tags.reload(); 
			}
        }]
    });

    var window_tags = new Ext.Window({
        layout : 'fit',
        width  : 500,
        height : 250,
        modal  : true,
        closeAction : 'hide',
        items  : [ form_tags ]
    });
    
    var form_asociar_tag = new Ext.form.FormPanel({
        labelAlign    : 'top',
        loadMask      : true,
        paramsAsHash  : true,
        frame         : true,
        //autoScroll    : true,
        border        : false,
        monitorValid  : true,
        defaults : {
            anchor : '95%'
        },
        api : {
            submit : DirectProduct.linkProduct
        },
        items: [{
            xtype      : 'numberfield',
            fieldLabel : 'ID del Producto',
            name       : 'esl_tag_id_producto',
            allowBlank : false
        },{
            xtype        : 'numberfield',
            name         : 'id_tag',
            allowBlank   : true,
            hidden	     : true,
            readOnly     : true
        }],
        buttons: [{
            text     : 'Guardar',
            cls      : 'x-btn-text-icon accept',
            formBind : true,
            handler  : function(){

                form_asociar_tag.getForm().submit({
                    waitTitle : 'Conectado',
                    waitMsg   : 'Enviando informacion...',
                    success   : function(form, action){
                        Ext.Msg.alert('Exito', 'Se ha asociado el TAG');
                    },
                    failure   : function(form, action){
                        failure_message(action);
                    }
                });

            }
        },{
            text    : 'Salir',
            cls     : 'x-btn-text-icon cross',
            handler : function(){ 
				window_asociar_tag.hide();
				store_grid_tags.reload(); 
			}
        }]
    });

    var window_asociar_tag = new Ext.Window({
        layout : 'fit',
        width  : 500,
        height : 150,
        modal  : true,
        closeAction : 'hide',
        items  : [ form_asociar_tag ]
    });
    
    /* Grillas y Store */

    var store_grid_tags = new Ext.data.DirectStore({
        root          : 'rows',
        totalProperty : 'results',
        directFn      : DirectProduct.listTags,
        autoLoad      : false,
        remoteSort    : true,
        baseParams : {
            start : 0,
            limit : page_size
        },
        sortInfo : {
            field     : 'id_tag',
            direction : 'ASC' // or 'DESC' (case sensitive for local sorting)
        },
        fields : [
            { name: 'id_tag',                   type: 'string'        }, 	//ID TAG
            { name: 'esl_tag_alias',            type: 'string'        }, 	//Alias TAG
            { name: 'esl_tag_barcode',          type: 'string'        }, 	//Alias TAG
            { name: 'esl_tag_id_producto',      type: 'string'        }, 	//ID del producto
            { name: 'esl_producto_nombre',      type: 'string'        }, 	//Nombre del Producto
            { name: 'esl_producto_precio',      type: 'string'        }, 	//Precio del Producto
            { name: 'esl_producto_barcode',     type: 'string'        } 	//Código de barras del Producto
         ]/*,
        listeners : {
            load: function(){
                asociar_tag_producto.disable();
                asociar_tag_producto.id_tag = undefined;
            }
        }*/
    });

    var grid_tags = new Ext.grid.GridPanel({
        stripeRows : true,
        loadMask   : true,
		autoExpand : true,
        title      : 'Listado de TAGS',
        region     : 'center',
        store      : store_grid_tags,
        autoExpandColumn : 4,
        sm: new Ext.grid.RowSelectionModel({
            singleSelect: true,
            listeners: {
                rowselect: function(sm,rowIndex,record)
                {
                    asociar_tag_producto.enable();
					action_eliminar_tag.enable();
					action_modificar_tag.enable();
                },
                rowdeselect: function()
                {
                    asociar_tag_producto.disable();
					action_eliminar_tag.disable();
					action_modificar_tag.disable();
                }
            }
        }),
        columns : [
            { header: 'ID TAG',                 		dataIndex: 'id_tag'              	, width: 200, hidden: true },
            { header: 'Alias',                    		dataIndex: 'esl_tag_alias'       	, width: 200 },
            { header: 'Código de Barras del TAG',  		dataIndex: 'esl_tag_barcode'   		, width: 200 },
            { header: 'ID Producto',                    dataIndex: 'esl_tag_id_producto'	, width: 200 },
            { header: 'Producto',                    	dataIndex: 'esl_producto_nombre'    , width: 200 },
            { header: 'Precio',                    		dataIndex: 'esl_producto_precio'    , width: 200 },
            { header: 'Código de Barras del producto',  dataIndex: 'esl_producto_barcode'   , width: 200 }
        ],
        tbar : new Ext.Toolbar({
            items : [
                action_nuevo_tag, '-',
                action_modificar_tag, '-',
                action_eliminar_tag, '-',
                asociar_tag_producto, '->',
                actualizar_info_de_tags
            ]
        }),
        bbar : new Ext.PagingToolbar({
            pageSize    : page_size,
            displayInfo : true,
            split       : false,
            store       : store_grid_tags,
            displayMsg  : "Mostrando Tags {0} a {1} de {2}",
            emptyMsg    : "No hay registros",
            plugins     : [ new Ext.ux.PageSizePlugin() ]
        })
    });
	
	/*****************************************************************************************************/
    /************************************ Grilla productos ***********************************************/
    /*****************************************************************************************************/
	
	var store_grid_prod = new Ext.data.DirectStore({
        root          : 'rows',
        totalProperty : 'results',
        directFn      : DirectProduct.listProducts,
        autoLoad      : false,
        remoteSort    : true,
        baseParams : {
            start : 0,
            limit : page_size
        },
        sortInfo : {
            field     : 'id_producto',
            direction : 'ASC' // or 'DESC' (case sensitive for local sorting)
        },
        fields : [
            { name: 'id_producto',            		  type: 'string'        }, 	//ID del producto
            { name: 'esl_producto_nombre',      	  type: 'string'        }, 	//Nombre del Producto
            { name: 'esl_producto_precio',      	  type: 'string'        }, 	//Precio del Producto
            { name: 'esl_producto_barcode',     	  type: 'string'        }, 	//Código de Barras del Producto
            { name: 'esl_producto_precio_por_unidad', type: 'string'        }, 	//Precio por Unidad del Producto
            { name: 'esl_tipo_unidad_nombre',      	  type: 'string'        }, 	//Tipo de Unidad del Producto
            { name: 'esl_producto_es_oferta',   	  type: 'string'        } 	//Indicador de oferta
         ]
    });

    var grid_prod = new Ext.grid.GridPanel({
        stripeRows : true,
        loadMask   : true,
		autoExpand : true,
        title      : 'Listado de Productos',
        store      : store_grid_prod,
        columns : [
            { header: 'ID Producto',          			dataIndex: 'id_producto'       				  , width: 200 },
            { header: 'Producto',                    	dataIndex: 'esl_producto_nombre'    		  , width: 200 },
            { header: 'Precio',                    		dataIndex: 'esl_producto_precio'    		  , width: 200 },
            { header: 'Código de Barras',	     		dataIndex: 'esl_producto_barcode'   		  , width: 200 },
            { header: 'Precio por Unidad',	     		dataIndex: 'esl_producto_precio_por_unidad'   , width: 200 },
            { header: 'Tipo de Unidad',	     			dataIndex: 'esl_tipo_unidad_nombre'   		  , width: 200 },
            { header: 'OFERTA',				     		dataIndex: 'esl_producto_es_oferta'   		  , width: 200 }
        ],
        tbar : new Ext.Toolbar({
            items : [
                //asociar_tag_producto // Acá se podria poner un filtro nada mas...
            ]
        }),
        bbar : new Ext.PagingToolbar({
            pageSize    : page_size,
            displayInfo : true,
            split       : false,
            store       : store_grid_prod,
            displayMsg  : "Mostrando Productos {0} a {1} de {2}",
            emptyMsg    : "No hay registros",
            plugins     : [ new Ext.ux.PageSizePlugin() ]
        })
    });
	
	
    /*****************************************************************************************************/
    /***************************************** MAIN WINDOW ***********************************************/
    /*****************************************************************************************************/

	var tab_panel = new Ext.TabPanel({
        activeTab : 0,
        region    : 'center',
        frame     : true,
		isTheFirstTabChange: true,
        defaults  : { autoScroll : true },
        listeners : {
            tabChange : {
                fn : function(tabpanel,tab){
                    //if(tab.store && tab.reloadStoreOnTabChange)
					if(!this.isTheFirstTabChange)
                        tab.store.reload();
					else
						this.isTheFirstTabChange = false;
                }
            }
        },
        items : [
            grid_tags,
			grid_prod
        ]
    });
	
    var title = new Ext.Container({
        region : 'north',
        height : 30,
        html   : '<div id="title" style="position:absolute;top:0px;left:0px;right:0px;padding:0;margin:0;height:30px;"><div id="header"><h1>Administrador de sistema</h1></div></div>'
    });

    //Viewport

    new Ext.Viewport({
        layout   : 'border',
        renderTo : 'contenido',
        items    : [
            title,
			tab_panel
        ]
    });

    loadingMask_remove();

})
